<template>
  <div class="his-data">
    <left-toggle-layout title="站点列表" width="290px">
      <template #left>
        <site-list />
      </template>
      <card-panel>
        <vue-echart :options="options" style="height: 280px"></vue-echart>
        <!--<h2>{{pagination}}</h2>-->
        <div class="margin-top-48">
          <el-table-block2
            :column="column"
            :data="rows"
            :pagination="true"
            :currentPage="pagination.pageNo"
            :pageSize="pagination.pageSize"
            :total="pagination.total"
            layout="prev, pager, slot, jumper, next"
            @currentChange="handleCurrentChange"
          />
        </div>
      </card-panel>
    </left-toggle-layout>
  </div>
</template>

<script>
import { axisLabelColor, lineStyleColor, legendTextStyleColor } from '@/assets/style/colorVar.scss'
import dayjs from 'dayjs'
import SiteList from '@/views/reservoir/shuiYuQingJianCe/dataMonitoring/components/SiteList'

export default {
  name: 'HisData',
  data() {
    return {
      queryObj: {
        field101: null
      },
      pagination: {
        pageNo: 1,
        pageSize: 5,
        total: 200
      },
      column: [
        { label: '监测时间', prop: 'dateTime', align: 'center' },
        { label: '雨量(mm)', prop: 'yl', align: 'center' },
        { label: '水位(cm)', prop: 'sw', align: 'center' }
      ],
      rows: [
        {
          dateTime: '2021-09-02 14:00',
          yl: '80',
          sw: '200'
        },
        {
          dateTime: '2021-09-02 14:00',
          yl: '80',
          sw: '200'
        },
        {
          dateTime: '2021-09-02 14:00',
          yl: '80',
          sw: '200'
        },
        {
          dateTime: '2021-09-02 14:00',
          yl: '80',
          sw: '200'
        },
        {
          dateTime: '2021-09-02 14:00',
          yl: '80',
          sw: '200'
        }
      ]
    }
  },
  components: {
    SiteList
  },
  methods: {
    handleCurrentChange(pageNo) {
      console.log('handleCurrentChange', pageNo)
      this.pagination.pageNo = pageNo
    }
  },
  computed: {
    options() {
      return {
        color: ['#33dfff', '#2afbc6', '#33dfff'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          itemGap: 16,
          left: 'right',
          icon: 'circle',
          itemWidth: 9,
          itemHeight: 9,
          textStyle: {
            color: legendTextStyleColor
          },
          data: ['雨量', '水位']
        },
        grid: {
          top: '22%',
          right: '0%',
          bottom: '3%',
          left: '0%',
          containLabel: true
        },
        xAxis: {
          axisLabel: {
            color: axisLabelColor,
            formatter: (value, index) => {
              return dayjs(value).format('DD')
            }
          },
          splitLine: {
            lineStyle: {
              color: lineStyleColor
            }
          },
          axisLine: {
            lineStyle: {
              color: lineStyleColor
            }
          },
          axisTick: {
            show: false
          },
          type: 'category',
          boundaryGap: false,
          data: [
            '2021-09-01',
            '2021-09-02',
            '2021-09-03',
            '2021-09-04',
            '2021-09-05',
            '2021-09-06',
            '2021-09-07',
            '2021-09-08',
            '2021-09-09',
            '2021-09-10',
            '2021-09-11',
            '2021-09-12',
            '2021-09-13',
            '2021-09-14',
            '2021-09-15',
            '2021-09-16',
            '2021-09-17',
            '2021-09-18',
            '2021-09-19',
            '2021-09-20',
            '2021-09-21',
            '2021-09-22',
            '2021-09-23',
            '2021-09-24',
            '2021-09-25',
            '2021-09-26',
            '2021-09-27',
            '2021-09-28',
            '2021-09-29',
            '2021-09-30'
          ]
        },
        yAxis: [
          {
            name: '雨量(mm)',
            type: 'value',
            axisLabel: {
              color: axisLabelColor
            },
            splitLine: {
              lineStyle: {
                color: lineStyleColor
              }
            },
            nameTextStyle: {
              color: legendTextStyleColor
            },
            axisTick: {
              show: false
            }
          },
          {
            name: '水位(cm)',
            type: 'value',
            axisLabel: {
              color: axisLabelColor
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: lineStyleColor
              }
            },
            nameTextStyle: {
              color: legendTextStyleColor
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: '雨量',
            type: 'line',
            stack: 'Total',
            data: [
              54,
              17,
              43,
              82,
              90,
              71,
              68,
              79,
              55,
              69,
              49,
              77,
              81,
              66,
              13,
              92,
              41,
              11,
              80,
              2,
              98,
              58,
              31,
              15,
              47,
              84,
              85,
              59,
              57,
              86
            ]
          },
          {
            name: '水位',
            type: 'line',
            stack: 'Total',
            yAxisIndex: 1,
            data: [
              85,
              99,
              11,
              21,
              58,
              8,
              63,
              71,
              15,
              37,
              79,
              7,
              46,
              74,
              59,
              62,
              40,
              41,
              48,
              51,
              84,
              61,
              17,
              50,
              42,
              89,
              38,
              16,
              18,
              13
            ]
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.his-data {
  width: 100%;
  height: 100%;
}
</style>
